<template>
    <div>
        <div class="height"></div>
        <div class="gray" @click="searchRoute">
            <div class="search">
                <van-icon name="search" size="18"/>
                <span>商品搜索,共239款好物</span>
            </div>
        </div>
        <div class="box">
            <van-sidebar v-model="activeKey" @change="onChange">
                <van-sidebar-item v-for="item in categoryList" :key="item.id" :title="item.name" />
            </van-sidebar>
            <div class="content">
                <img :src="subList.banner_url" width="100%" height="111">
                <p>{{subList.name}}分类</p>
                <ul class="flex">
                    <li v-for="item in subList.subList" :key="item.id" @click="touteInfo(item.id)">
                        <img :src="item.wap_banner_url" width="72" height="72">
                        <span>{{item.name}}</span>
                    </li>
                </ul>
                
            </div>
        </div>
    </div>
</template>

<script>
import { indexaction, currentaction } from "@/api/category/index.js"
export default {
    name:'category',
    data() {
        return {
            categoryList:[],
            activeKey:0,
            subList:{}
        };
    },
    
    computed: {

    },
    created() {
        this.init();
    },
    methods: {
        touteInfo(id){
            this.$router.push({path:'/category/info',query:{ids:id}})
        },
        init(){
            indexaction().then(res=>{
                this.categoryList = res.data.categoryList;
            }).then(res=>{
                currentaction({
                    id:this.categoryList[0].id
                }).then(res=>{
                    this.subList = res.data.data.currentOne;
                })
            })
        },
        searchRoute(){
            this.$router.push({path:"/home/search"})
        },
        onChange(index){
            this.activeKey = index;
            currentaction({
                id:this.categoryList[index].id
            }).then(res=>{
                console.log(res);
                this.subList = res.data.data.currentOne;
                console.log(this.subList);
            })      
        }
    },
    
};
</script>

<style scoped lang="scss"> 
::v-deep .van-sidebar-item--select::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 35px;
    background-color: #ab2b2b;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: '';
}
::v-deep .van-sidebar-item.van-sidebar-item--select{
    color: #ab2b2b;
    font-size: 18px;
}
.height{
    height: 45.7px;
}
.gray{
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 15px;
    display: flex;
    z-index: 10000;
    background-color: #fff;
    align-items: center;
    width: 345px;
    height: 44px;
    padding-bottom:1px;
    border-bottom: .01333rem solid #ededed;
    .search{
        height: 28px;
        width: 100%;
        background-color: #ededed;
        border-radius: 0.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        span{
            margin-left:5px ;
        }
    }
}
.box{
    display: flex;
    overflow: scroll;
    .content{
        width: 265px;
        padding: 0 15px;
        img{
            padding-top:10px;
        }
        p{
            position: relative;
            margin: 0;
            padding: 25px 0;
        }
        p::after{
            content:"";
            display: block;
            position: absolute;
            width: 14px;
            height: .5px;
            background-color: #000;
            left: 88px;
            top: 50%;
        }
        p::before{
            content:"";
            display: block;
            position: absolute;
            width: 14px;
            height: .5px;
            background-color: #000;
            right: 88px;
            top: 50%;
        }
        .flex{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            flex-wrap:wrap;
            li{
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                margin-bottom:10px;
                img{
                    padding: 0 7.8px;
                }
            }
        }
    }
}
</style>
